<template>
  <div class="service">
    <div class="title">
      <h2>{{ query.userName }}服务的客户</h2>
      <!-- queryParams:{{ queryParams }} -->
    </div>
    <el-row v-loading="loading">
      <el-table :data="tableData" size="large">
        <el-table-column
          prop="indexId"
          label="序号"
          type="index"
          width="60"
          align="center"
        />
        <el-table-column
          prop="customerId"
          label="用户编号"
          align="center"
          width="100px"
        />
        <el-table-column
          prop="customerName"
          label="客户姓名"
          width="100px"
          align="center"
        />
        <el-table-column prop="customerAge" label="年龄" width="80px" align="center" />

        <el-table-column prop="customerSex" label="性别" width="80px" align="center" />
        <el-table-column prop="roomNo" label="房间号" width="80px" align="center" />
        <el-table-column prop="bedId" label="床位号" width="80px" align="center" />
        <el-table-column prop="levelId" label="护理级别" width="100px" align="center" />
        <el-table-column prop="userId" label="健康管家" width="100px" align="center" />
        <el-table-column fixed="right" label="操作" align="center" min-width="100px">
          <template #default="scope">
            <el-button
              type="danger"
              size="small"
              icon="Delete"
              round
              @click="deleteUser(scope.row.customerId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin: 20px 40px"
        layout="prev, pager, next, jumper, ->, total,"
        :total="queryParams.total"
        v-model:page-size="queryParams.size"
        v-model:current-page="queryParams.current"
        @current-change="queryList"
        @size-change="queryList"
      />
    </el-row>
  </div>
</template>

<script setup>
import { ref, toRef, onMounted } from "vue";
import {
  listInfo,
  removeById,
  updateUserIdById,
} from "@/api/customer/checkIn/index";
import { ElMessageBox, ElNotification } from "element-plus";
import { useRoute } from "vue-router";

const route = useRoute();

const { customerName } = defineProps(["customerName"]);

const loading = ref(false);

// 监听路由参数的变化
let query = toRef(route, "query");

// 表格数据
const tableData = ref([]);

// 查询条件
const queryParams = ref({
  customerName: "",
  current: 1,
  size: 5,
  total: 0,
  userId: query.value.userId,
});

async function queryList() {
  //   queryParams.value.userId = query.userId; // 设置健康管家为路由参数中的 userId
  //   console.log("右侧查询参数：", queryParams.value);

  loading.value = true;
  try {
    queryParams.value.customerName = customerName;
    const page = await listInfo(queryParams.value);
    loading.value = false;
    tableData.value = page.records;
    queryParams.value.total = page.total;
  } catch (e) {
    loading.value = false;
  }
}

// 删除按钮 调用更新方法
const deleteUser = (id) => {
  ElMessageBox.confirm("是否确认删除该用户信息?", "Warning", {
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    updateUserIdById(id).then((_success) => {
      ElNotification({
        title: "消息",
        type: "success",
        message: "删除成功",
      });
      queryList();
    });
  });
};

onMounted(() => {
  queryList();
});

defineExpose({ queryList });
</script>

<style scoped>
/* 外出登记 */
.service {
}

.service .title {
  background-color: #ffffff;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  text-align: left;
  margin: 0;
  padding: 12px;
  color: #1890ff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 表格样式 */
.table-header {
  color: #909399;
}

.table-row {
}

.table-row:hover {
}

.el-table {
  overflow: hidden;
}

.el-table th,
.el-table tr {
}

.el-table th {
  color: #909399;
  font-weight: bold;
}

.el-table td {
  color: #606266;
}

.el-table::before {
  height: 0;
}
</style>
